<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            是否显示标注：
            <i-switch v-model="defaultNameStatus" />
            <br><br>
            操作方法：<br>点击按钮，然后选择地图，<br>左键点击为画点，双击结束绘制
            <br><br>
            <Button @click="MeasureCircle">圆形</Button>
            <br>
            <br>
            <Button @click="MeasureRectangle">矩形</Button>
            <br>
            <br>
            <Button @click="MeasurePolygon">多边形</Button>
            <br>
            <br>
            <Button @click="MeasurePolyline">折线</Button>
            <br>
            <br>
            <Button @click="ClearAll">清除全部</Button>
            <br><br>
            点击绘制对象，可以得到绘制几何对象结果
            <br><br>
            取值时单位：<RadioGroup v-model="valueType" type="button">
                <Radio label="km"></Radio>
                <Radio label="m"></Radio>
            </RadioGroup>

        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
var _Measure = null;


export default {
    data() {
        return {
            SenceMode: '2D',
            defaultNameStatus: true,
            valueType: 'km'
        }
    },
    watch: {
        defaultNameStatus(newValue) {
            _Measure && (_Measure.defaultNameStatus = newValue);
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();
        // 创建绘制图层
        _Measure = new simpleMap.MeasureDataSource(map, { Click: true, RightClick: true, defaultNameStatus: true });

        // 可以给图层绑定点击事件
        // 事件方法同 点击事件篇
        _Measure.on('Click', (item) => {
            var value = item.getValue(this.valueType);
            this.$Message.info({
                closable: true,
                duration: 0,
                content: '<code style="text-align: left;"><pre>' + JSON.stringify(value, null, '    ') + '</pre></code>'
            })
        })
    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
        MeasureCircle() {
            // 圆形
            // 支持色号直接给元素填充颜色
            _Measure.start('circle', { color: '#DD00DD' }, (item) => {
                // 回调事件 item 参数为 当前绘制结束后的 元素对象
                // 通过 getValue 方法可以 获取到元素的绘制属性
                var value = item.getValue(this.valueType);
                this.$Message.info({
                    closable: true,
                    duration: 0,
                    content: '<code style="text-align: left;"><pre>' + JSON.stringify(value, null, '    ') + '</pre></code>'
                })
            });
        },
        MeasureRectangle() {
            // 矩形
            // 使用8位 hex 色号 可以控制透明度
            _Measure.start('rectangle', { color: '#DD00DDCC' }, (item) => {
                var value = item.getValue(this.valueType);
                this.$Message.info({
                    closable: true,
                    duration: 0,
                    content: '<code style="text-align: left;"><pre>' + JSON.stringify(value, null, '    ') + '</pre></code>'
                })
            });
        },
        MeasurePolygon() {
            // 多边形
            _Measure.start('polygon', { color: 'RED' }, (item) => {
                var value = item.getValue(this.valueType);
                this.$Message.info({
                    closable: true,
                    duration: 0,
                    content: '<code style="text-align: left;"><pre>' + JSON.stringify(value, null, '    ') + '</pre></code>'
                })
            });
        },
        MeasurePolyline() {
            // 折线
            _Measure.start('polyline', { color: 'RED' }, (item) => {
                var value = item.getValue(this.valueType);
                this.$Message.info({
                    closable: true,
                    duration: 0,
                    content: '<code style="text-align: left;"><pre>' + JSON.stringify(value, null, '    ') + '</pre></code>'
                })
            });
        },
        ClearAll() {
            // 清除全部
            _Measure.ClearAll();
        },
    },
    beforeDestroy() {
        // 不需要注销地图时，可单独注销图层
        // 注销时，会同步注销子元素事件
        _Measure && _Measure.Destroy();

        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>